<div class="cotainer">
  <div class="panel panel-default" style="border-radius: 5px;">   
    <div class="panel-body" style="margin-bottom: 0">
      <span class="font-bold">设备别名：</span><span>{{devinfoData?.alias_name||'无'}}</span>
      <span class="m-l font-bold">设备自定义名称：</span><span>{{devinfoData?.xcxlh||'无'}}</span>
      <span class="m-l font-bold">终端用户：</span><span>{{devinfoData?.zdyh||'无'}}</span>
      <span class="m-l font-bold">设备序列号：</span><span>{{devinfoData?.sn||'无'}}</span>
      <span class="m-l font-bold">设备型号：</span><span>{{devinfoData?.model||'无'}}</span>
      <span class="m-l font-bold">设备状态：
        <span *ngIf="devinfoData?.online=='0'" class="label bg-danger inline m-t-xs">离线</span>
        <span *ngIf="devinfoData?.online=='1'" class="label bg-success inline m-t-xs">在线</span>
      </span>
    </div>
  </div>
</div>

  <div class="cotainer m-t-n-lg" >
    <header>
      <a class="nav-title active "  (click)="change(0);">设备监控</a>
      <a class="nav-title" (click)="change(1);">服务参数</a>
      <!-- <a class="nav-title" (click)="change(2);">故障参数</a> -->
      <a class="nav-title" (click)="change(2);">历史数据</a>
      <!-- <a class="nav-title" (click)="change(4);">报警</a>
      <a class="nav-title" (click)="change(5);">能效分析</a> -->
    </header>
  </div>

  <div class="content-box xx-box" id="realtime" >
    <div class="content-box-child">
      <div class="content-box-title">实时状态</div>
      <div class="charts-box">
        <div class="charts-child" >
          <div id="angular-gauge1" style="min-width: 150px; max-width: 200px; height: 200px; margin: 0 auto">
          </div>
          <div class="charts-child-txt"><span >供气压力</span></div>
        </div>
        <div class="charts-child" >
          <div id="angular-gauge2" style="min-width: 150px; max-width: 200px; height: 200px; margin: 0 auto">
          </div>
          <div class="charts-child-txt"><span >排气温度</span></div>
        </div>
        <div class="charts-child" >
          <div id="angular-gauge3" style="min-width: 150px; max-width: 200px; height: 200px; margin: 0 auto">
          </div>
          <div class="charts-child-txt"><span >主机A项电流</span></div>
        </div>
        <div class="charts-child">
          <div class="charts-child-time">
            <span class="charts-child-time-left">运行时间</span>
            <span id="ScrewMachine_State_3">--</span>
            <span>H</span>
          </div>
          <div class="charts-child-time">
            <span class="charts-child-time-left">加载时间</span>
            <span id="ScrewMachine_State_4">--</span>
            <span>H</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box-child">
      <div class="trouble-box">
                <span class="trouble-child-box">
                    <span class="trouble-child-left" id="ScrewMachine_State_12">运行</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_121"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left" id="ScrewMachine_State_11">加载</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_111"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">空久停机</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_21"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">供气压力高</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_20"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">预警</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_23"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">报警</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_22"></span>
                </span>
      </div>
    </div>
    <div class="content-box-child">
      <div class="content-box-title">实时故障状态</div>
      <div class="trouble-box">
                <span class="trouble-child-box">
                    <span class="trouble-child-left">风机电流故障</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_19"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">油滤器堵塞</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_18"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">油分器堵塞</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_17"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">空滤器堵塞</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_16"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">主电机电流故障</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_15"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">相序错误</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_14"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">排气温度高</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_13"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">供气压力传感器失灵</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_32"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">排气温度传感器失灵</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_31"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">缺水</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_30"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">排气温度高预警</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_29"></span>
                </span>
      </div>
    </div>
  </div>


  <div  class="info-box xx-box" id="sevinfo" style="display: none;">
    <div class="info-box-child left">
      <table class="table table-striped">
        <caption>服务参数</caption>
        <thead>
        <tr>
          <th>#</th>
          <th>参数</th>
          <th>值</th>
          <th>单位</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>油滤器使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_6">--</td>
          <td>小时</td>
        </tr>
        <tr>
          <td>2</td>
          <td>油分器使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_7">--</td>
          <td>小时</td>
        </tr>
        <tr>
          <td>3</td>
          <td>空滤器使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_8">--</td>
          <td>小时</td>
        </tr>
        <tr>
          <td>4</td>
          <td>润滑油使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_9">--</td>
          <td>小时</td>
        </tr>
        <tr>
          <td>5</td>
          <td>润滑脂使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_10">--</td>
          <td>小时</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="info-box-child right">
      <table class="table table-striped">
        <caption>&nbsp;&nbsp;</caption>
        <thead>
        <tr>
          <th>#</th>
          <th>服务参数报警</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>油滤器使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_28"></span></td>
        </tr>
        <tr>
          <td>2</td>
          <td>油分器使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_27"></span></td>
        </tr>
        <tr>
          <td>3</td>
          <td>空滤器使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_26"></span></td>
        </tr>
        <tr>
          <td>4</td>
          <td>润滑油使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_25"></span></td>
        </tr>
        <tr>
          <td>5</td>
          <td>润滑脂使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_24"></span></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div  class="info-box xx-box" id="historyinfo" style="display: none;">
    <div class="wrapper-sm">
    <div class="panel panel-default  m-t-n-md">     
        <div class="panel-body">         
          <div class="row" >

            <div class="col-xs-2" *ngFor="let propertyData of propertyData" style="margin-bottom: 10px;">
              <input type="checkbox" name="cbx" value="{{propertyData.property}}" (click)="fn($event,propertyData.property)">{{propertyData.display_name}}
            </div>
          </div>
         
          <div class="row">
            <div class="col-md-12">
              <div class="panel panel-default">
                <div class="panel-heading">
                  该设备的数据点历史数据导出
                </div>
                <div class="panel-body">
                   <button class="btn btn-info m-b-md" (click)="model.begintime='';model.endtime='';myModal.show()">该设备的历史数据导出</button>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <div class="panel panel-default" style="padding:10px;">
                <div class="panel-heading">30分钟历史数据                  
                  <span  class="pull-right" style="color:red;">提示：一次最多同时查询5个参数，最多可查询30天数据，导出的zip文件，解压缩后文件里面的时间是到秒级别，因此看的时候可以先设置下单元格的样式</span></div>
                <div class="panel-body">
                  <div>
                  <span>请选择时间：</span>
                  <input size="16" type="text" value="" class="form_datetime" id="stime"  readonly>
                  <button class="m-l" (click)="chosedparam()" data-loading-text="数据曲线加载中..." autocomplete="off" id="myButton">查询数据曲线</button>
                  <span class="m-l"><button (click)="out30data()" data-loading-text="数据查询中..." autocomplete="off" id="out30Button">数据导出</button></span>
                  <span *ngIf="out30d"><a class="m-l" href="http://{{out30d}}" style="color: blue" target="_blank">点击链接下载{{out30d}}</a></span>
                  </div>
                  <div> 
                      {{tldata}}  
                      <div [hidden]="tdata.length===0">
                        <div id="getqx" style="width: 90%;  height: 400px; "></div> 

                      </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-12">
              <div class="panel panel-default" style="padding:10px;">
                <div class="panel-heading">按时间段选择采样数据                 
                  <span  class="pull-right" style="color:red;">提示：一次最多同时查询5个参数,可查询365天的数据，导出的zip文件，解压缩后文件里面的时间是到秒级别，因此看的时候可以先设置下单元格的样式</span></div>
                <div class="panel-body">
                    <div>
                      <span>起始：</span>
                      <input size="16" type="text" value="" class="form_datetime1" id="qBeginTime" readonly>
                      <span class="m-l">终止：</span>
                      <input size="16" type="text" value="" class="form_datetime2" id="qEndTime" readonly>
                      <button class="m-l" (click)="chosedparam1()" data-loading-text="数据曲线加载中..." autocomplete="off" id="myButton1">查询数据曲线</button>
                      <span class="m-l"><button (click)="out60data()" data-loading-text="数据查询中..." autocomplete="off" id="out60Button">数据导出</button></span>
                       <span *ngIf="out60d"><a class="m-l" href="http://{{out60d}}" style="color: blue" target="_blank">点击链接下载{{out60d}}</a></span>

                    </div>
                    <div>

                      {{tndata}}
                      <div [hidden]="tmdata.length===0">
                        <div id="getqx1" style="width: 90%;  height: 400px;"></div>
                      </div>
                    </div>

                </div>
              </div>       
            </div>


          </div>

        </div>
    </div>
 </div>
   <!-- //modal -->
 <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h3 class="modal-title">
            <p >导出历史数据</p>         
          </h3>
        </div>

        <div class="modal-body">
          <div class="row">
            <div>
              <form class="bs-example form-horizontal">

               <div style="padding:10px;">
                  <div style="font-size:12px;background-color: #e5e5e5;padding: 5px;" >该入口是将该设备已存储的数据点全部导出，将以链接的方式发送到您的邮箱。如果您的邮箱尚未填写到我们平台，请前往平台下【用户信息】下的【基本信息】单元进行编辑。如果您选择的时间段越长下载时间可能越长，请您耐心等待。目前支持下载周期为一年。</div>
               </div>
               
                <div class="form-group m-t">
                  <label class="col-lg-3 control-label">开始日期</label>
                  <div class="col-lg-7">                    
                    <input size="16" type="text" value="" [(ngModel)]="model.begintime" name="begintime" class="form_datetimeout1 form-control" id="BeginTime" readonly>
                  </div> 
                </div>

                <div class="form-group">
                  <label class="col-lg-3 control-label">结束日期</label>
                  <div class="col-lg-7">                    
                    <input size="16" type="text" value="" [(ngModel)]="model.endtime" name="endtime" class="form_datetimeout2 form-control" id="EndTime" readonly>
                  </div> 
                </div>

              </form>
            </div>
          </div>
        </div>
   

        <div class="modal-footer">
          <button class="btn btn-info" (click)="confirmExport();">确定</button>
          
          <button class="btn btn-default" (click)="myModal.hide();cansel();">取消</button>
        </div>

      </div>

    </div>
  </div>

  

  </div>
